
<template>
  <div ref="chart" class="echart"></div>
</template>  


<script>
import * as echarts from 'echarts';
import axios from 'axios';

export default {
  data() {
    return {
      closePrice:[5, 120],
      recordDate:[],
      kLineData:[ // open, close, high, low
        [150, 250, 350, 400],
        [370, 270, 570, 500],
        [150, 250, 650, 400],
        [370, 270, 870, 500],
        // ... 更多K线数据
      ],
      yAxisMin: 0,
      yAxisMax: 10,
    }
  },
  mounted() {
    // this.initChart();
    this.fetchData();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chart);
      // 指定图表的配置项和数据
      const option = {
        xAxis: {
          data: this.recordDate,
          
        },
      
        yAxis: {  
            type: 'value',  
            min: this.yAxisMax,
            max: this.yAxisMin,
            // 其他配置...  
            axisLine: {  
                // 这里设置Y轴主线的样式，但它通常不是我们要关注的  
                lineStyle: {  
                    color: '#000'  
                }  
            },  
            splitLine: {  
                // 将Y轴的分割线设置为虚线  
                show: true,  
                lineStyle: {  
                    type: 'dashed', // 设置为虚线  
                    color: '#ccc' // 分割线颜色  
                }  
            }  
        },  

        series: {
          data: this.kLineData,
          type: 'candlestick',// 显示种类,如线性等
          name: '日K',
          itemStyle: {// 对象样式
              normal: {
                  color: '#FD1050',
                  color0: '#0CF49B',
                  borderColor: '#FD1050',
                  borderColor0: '#0CF49B'
              }
          }
        },

        dataZoom: [  
          {  
              type: 'slider', // 设置为slider类型  
              show: true, // 是否显示滑动条  
              xAxisIndex: [0], // 指定作用于哪个坐标轴，K线图通常只有一个x轴  
              start: 0, // 初始时数据窗口的起始百分比  
              end: 10, // 初始时数据窗口的结束百分比，这里只显示10%的数据  
              // 其他可选配置...  
          },  
          {  
              type: 'inside', // 另一种dataZoom，允许通过鼠标滚轮缩放  
              xAxisIndex: [0],  
              zoomOnMouseWheel: true, // 是否启用鼠标滚轮缩放  
          }  
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    async fetchData() {  
      try { 
        const response = await axios.get('api/plat/stock/getStockTimeData?stockCode=600733');  
        
        const result = response.data;
        console.log('请求结果:', result);
        if (result.status == 200) {  
          console.log('请求成功:', result);
          this.kLineData = []; 
          result.data.forEach(item => {   
            // 对item进行所需的操作 
            this.closePrice.push(item.closePrice) 
            const arr = [item.openPrice, item.closePrice, item.maxPrice, item.minPrice]
            this.kLineData.push(arr) 
            this.recordDate.push(item.recordDate)
          }); 
          // 计算最大值和最小值
          const highs = this.kLineData.map(item => item[2]); // 获取所有最高价
          const maxPrice = Math.max(...highs); // 找到最高价中的最大值
          const minPrice = Math.min(...highs); // 找到最高价中的最小
          // 自定义 y 轴的范围
          this.yAxisMin = (minPrice - (maxPrice - minPrice) * 0.25).toFixed(2)
          this.yAxisMax = (maxPrice + (maxPrice - minPrice) * 0.25).toFixed(2)

          this.initChart();
           
        } else {
          console.error('请求失败:');
        }     
      } catch (error) {  
        console.error('请求error:', error);  
      }  
    },
  }
}
</script>
  
<style scoped>
.echart {
  float: left; width: 80%; height: 700px
}
</style>
  